<template>
	<view class="dianpu_wrap">
		<u-navbar :isFixed="true" :borderBottom="false" back-icon-color="#333" title="提现列表"
			:background="{'background':'#f6f6f6'}"></u-navbar>
		<u-tabs :list="tab_list" @change="changeTab" activeColor="#dd0000" style="position:fixed;width: 100%;"></u-tabs>
		<view class="dianpu_list" v-if="dianpuList.length > 0">
			<view v-for="(item, index) in dianpuList" class="dianpu_item">
				<view class="dianpu_item_title">
					<view class="title_left">
						{{item.created_at}}
					</view>
					<view class="title_right">
						{{item.status_name}}
					</view>
				</view>
				<view class="dianpu_item_info">
					<view class="left">
						<view class="user_id">
							ID：{{ item.id }}
						</view>
						<view class="user_id">
							昵称<strong><strong><strong><strong></strong></strong></strong></strong>：{{ item.member.nickname }}
						</view>
						<view class="user_phone">
							手机号：{{ item.member.phone }}
						</view>
					</view>
					<view class="right">
						金额：<b><text class="money">{{ item.money }}</text></b>
					</view>

				</view>
				<view class="see_detail">
					<view class="see_detail_btn"
						@tap="$Router.push({path:'/pages/app/merchant/dianpu_withdraw_detail',query:{id:item.id}})">查看详情
					</view>
				</view>

			</view>
		</view>
		<!-- 缺省页 -->
		<shopro-empty v-else :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无数据"></shopro-empty>
		<!-- 更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
	</view>
</template>

<script>
	const mode = ['paying', 'agreed', 'paid', 'finished', 'denied'];
	export default {
		data() {
			return {
				loadStatus: 'nomore',
				dianpuList: [],
				tab_list: [{
						name: '待处理'
					},
					{
						name: '待打款'
					},
					{
						name: '已打款'
					},
					{
						name: '已完成'
					},
					{
						name: '已拒绝'
					},
				],
				curr_index: 0,
				cur_page:1,
				last_page:1,
				isEmpty: false
			}
		},
		onLoad() {
			this.fetchPageData();
		},
		onShow() {
			
		},
		methods: {
			changeTab(index) {
				this.curr_index = index;
				this.cur_page = 1;
				this.dianpuList = []
				this.fetchPageData();
			},
			onReachBottom() {
				if (this.cur_page < this.last_page) {
					this.cur_page += 1;
					this.fetchPageData();
				}
			},
			fetchPageData() {
				this.loadStatus = 'loading';
				/**
					 * 'paying'=>'待处理',
						'denied'=>'已拒绝',
						'agreed'=>'待打款',
						'paid'=>'已打款',
						'finished'=>'已完成'
					 */
				this.$http('money.dianpu_withdraw_dianpuapplylist', {
					mode: mode[this.curr_index],
					page:this.cur_page
				}).then(res => {
					if (res.ret && res.ret == 0) {
						this.$u.toast(res.msg);
					
						return
					}
					if (res.total >0) {
						this.dianpuList = [...this.dianpuList,...res.rows];
						this.last_page+=1;
						this.loadStatus = this.cur_page < (res.total / 10) ? 'loadmore' : 'nomore';
						this.isEmpty = false;
						return
					}
					
					this.isEmpty = true;
					this.loadStatus = 'nomore';
				})
			}
			
		
		}
	}
</script>

<style scoped>
	.dianpu_list {
		margin-top: 106rpx;
	}

	.dianpu_item_title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #666;
	}

	.dianpu_item {

		padding: 30rpx;
		margin: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.dianpu_item_info {
		display: flex;
		justify-content: space-between;
	}

	.dianpu_list .left {
		font-size: 24rpx;
		color: #555;
	}

	.user_id {
		margin-bottom: 20rpx;
	}

	.right {
		color: #5ebc00;
	}

	.right .money {
		font-size: 42rpx;
	}

	.see_detail {
		display: flex;
		justify-content: flex-end;
	}

	.see_detail .see_detail_btn {
		width: 25%;
		padding: 12rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
		background-color: #f56c6c;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
	}
</style>
